<template>
  <el-drawer
    title="规则预警配置"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDrawer"
    custom-class="tag-drawer monitor-rule-drawer"
  >
    <tag-step :step="step" :active="active"></tag-step>
    <rule-config
      ref="ruleConfig"
      v-show="active === 0"
      :drawerType="drawerType"
      @clearDrawer="clearDrawer"
      @next="next"
    ></rule-config>
    <rule-threshold
      ref="ruleThreshold"
      :drawerType="drawerType"
      v-show="active === 1"
      @clearDrawer="clearDrawer"
      @prev="prev"
      @handleSubmit="$emit('refresh')"
    ></rule-threshold>
  </el-drawer>
</template>
<script>
import ruleConfig from './rule-config'
import ruleThreshold from './rule-threshold'
export default {
  name: 'configDrawer',
  components: {
    ruleConfig,
    ruleThreshold
  },
  data() {
    return {
      drawerVisible: false,
      drawerType: 'add',
      tagId: '',
      active: 0,
      step: [
        {
          icon: 'iconApprove',
          name: '标签区间分布'
        },
        {
          icon: 'iconApprove',
          name: '区间枚举值波动个数或阈值'
        }
      ]
    }
  },
  methods: {
    showDrawer(params) {
      this.drawerType = params.type
      this.tagId = params.tagId
      this.drawerVisible = true
      this.$nextTick(() => {
        this.$refs.ruleConfig.init(params)
      })
    },
    next(params) {
      this.active++
      this.$nextTick(() => this.$refs.ruleThreshold.init(params))
    },
    prev() {
      this.active--
    },
    clearDrawer() {
      this.$refs.ruleConfig && this.$refs.ruleConfig.clearDrawer()
      this.$refs.ruleThreshold && this.$refs.ruleThreshold.clearDrawer()
      this.drawerType = 'add'
      this.tagId = ''
      this.active = 0
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="scss">
.tag-drawer.monitor-rule-drawer {
  .el-drawer__body {
    .drawer-wrap {
      top: 100px;
    }
  }
  .default-content {
    .el-form-item__label {
      font-size: 14px !important;
      font-weight: normal !important;
    }
  }
  .el-pagination .el-input {
    width: 100px !important;
  }
}
</style>
